<template>
	<popup-bottom :show="show" @close="closeSkuBox">
		<view class="sku-box">
			<view class="sku-header container">
				<image class="goods-img" :src="selectSkuInfo.image?selectSkuInfo.image:thumbnail"></image>

				<view class="sku-goods-info">
					<view class="money" :style="{color:themeColor}">
						<text class="symbol fs-26">￥</text>
						<text class="amount fs-38">{{selectSkuInfo.price}}</text>
					</view>
					<view class="stock fs-24">
						库存{{selectSkuInfo.quantity}}件
					</view>
					<view class="fs-24">
						{{selectSkuInfo.spec_info}}
					</view>
				</view>
			</view>
			<scroll-view class="sku-list" scroll-y="true">
				<view class="sku-item container" v-for="(sku, sIndex) in form" :key="sIndex">
					<view class="sku-name">{{sku.name}}</view>
					<view class="sku-content">
						<text class="sku-content-item" v-for="(item,index) in sku.list" :key="index" :style="{
									borderColor: item.selected ? themeColor: '',
									color: item.selected ? themeColor : '',
									backgroundColor: item.selected ? 'white' : '#f5f5f5' }" @click="selectSku(sIndex,index)">{{item.value}}</text>
					</view>
				</view>
			</scroll-view>
			<view class="sku-item container count">
				<view class="sku-name">数量</view>
				<view class="count-box">
					<text class="minus" :class="{disabled:buyCount<=1}" @click="handleBuyCount('minus')">-</text>
					<input class="count-content" v-model="buyCount" :disabled="selectSkuInfo.quantity<=0" />
					<text class="add" :class="{disabled:buyCount>=selectSkuInfo.quantity}"
						@click="handleBuyCount('add')">+</text>
				</view>
			</view>
			<view class="confirm-btn container" :class="{disabled:selectSkuInfo.quantity==0}"
				:style="{backgroundColor:themeColor}" @click="handleConfirm">
				{{selectSkuInfo.quantity > 0 ? type == 1 ? '立即购买' : '加入购物车' : '缺货中'}}
			</view>
		</view>
	</popup-bottom>
</template>

<script>
	import PopupBottom from './popup-bottom'
	export default {
		components: {
			PopupBottom
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			themeColor: {
				type: String,
				default: '#1ac792'
			},
			skuForm: {
				type: Array,
				default () {
					return []
				}
			},
			skuIds: {
				type: [Array, Object],
			},
			defaultSelectIndex: {
				type: Number,
				default: 0
			},
			thumbnail: String,
			type: Number
		},
		data() {
			return {
				buyCount: 1,
				selectedIndex: 0,
				borderWidth: uni.upx2px(2),
				form: this.skuForm,
				ids: this.skuIds,
				idLength: 0,
				selectSkuInfo: {}
			}
		},
		created() {
			this.initSkuData()
		},
		methods: {
			initSkuData() {
				let key = Object.keys(this.skuIds)[0]
				console.log(Object.keys(this.skuIds))
				if(key.length==0){
					return
				}
				this.idLength = key.length
				let arr = key.split(":")			
				console.log(this.form)
				this.form.forEach((item) => {
					console.log(item)
					item.list.forEach(i => {
						arr.forEach(a => {
							if (a == i.key) {
								i.selected = true
							}
						})
					})
				})
				this.selectSkuInfo = this.skuIds[key]
				console.log(this.selectSkuInfo)
			},
			selectSku(sIndex, index) {
				console.log(this.form)
				this.form[sIndex].list.forEach((item) => {
					item.selected = false
				})
				this.form[sIndex].list[index].selected = true
				this.$forceUpdate()
				let key = ''
				this.form.forEach((item) => {
					item.list.forEach(i => {
						console.log(i)
						if (i.selected) {
							key = key ? key + ';' + i.key : i.key
						}
					})
				})
				// console.log(key)
				let arr = key.split(";")
				let arr1 = arr[0].split(":");
				key = arr1[1];
				if(arr[1]){
					let arr2 = arr[1].split(":");
					key = arr1[1]+'_'+arr2[1]
				}
				
				// console.log(arr1[1]+'_'+arr2[1])
				// key = arr1[1]+'_'+arr2[1]
				let info = this.skuIds[key]
				console.log(this.skuIds)
				if (info) {
					this.selectSkuInfo = info
				} else if (key.length === this.idLength) {
					this.selectSkuInfo = {
						quantity: 0,
						price: 0,
						spec_info: '该规格无商品'
					}
				}
			},
			handleBuyCount(type) {
				if (type === 'minus') {
					if (this.buyCount <= 1) return
					this.buyCount = this.buyCount * 1 - 1
				}
				if (type === 'add') {
					if (this.buyCount >= this.selectSkuInfo.quantity) return
					this.buyCount = this.buyCount * 1 + 1
				}
			},
			closeSkuBox() {
				this.$emit('close')
			},
			handleConfirm() {
				this.$emit('confirm', {
					...this.selectSkuInfo,
					buyCount: this.buyCount
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		align-items: center;
	}

	.flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	$font-color-light: #999999;
	$page-bg-color-grey: #f5f5f5;

	.fs-24 {
		font-size: 24upx;
	}

	.fs-26 {
		font-size: 26upx;
	}

	.fs-38 {
		font-size: 38upx;
	}

	.container {
		width: 690upx;
		margin: 0 auto;
	}

	.sku-box {
		min-height: 500upx;
		background-color: white;
		padding-bottom: 20upx;
		font-size: 28upx;
		color: #333333;

		.sku-header {
			display: flex;
			padding: 40upx 0 20upx;

			.goods-img {
				width: 200upx;
				height: 200upx;
				border-radius: 6upx;
				border: 4upx solid white;
				flex: none;
				margin-top: -80upx;
			}
		}

		.sku-goods-info {
			margin-left: 20upx;

			.money {
				border: none;
				padding-bottom: 0;
			}

			.stock {
				color: $font-color-light;
			}
		}

		.sku-list {
			max-height: 500upx;
		}

		.sku-item {
			padding: 30upx 0;

			.sku-name {
				font-size: 30upx;
			}

			.sku-content {
				border-bottom: 2upx solid $page-bg-color-grey;
				padding: 20upx 0;
				@extend .flex-center;
				flex-wrap: wrap;

				.sku-content-item {
					padding: 16upx 20upx;
					border-radius: 6upx;
					margin: 0 30upx 20upx 0;
					border: 2upx solid transparent;
				}
			}

			&.count {
				@extend .flex-center;
				justify-content: space-between;

				.count-box {
					@extend .flex-center;

					text,
					.count-content {
						@extend .flex-center-center;
						width: 70upx;
						height: 70upx;
						font-size: 32upx;
						border: 2upx solid $page-bg-color-grey;
					}

					.add,
					.minus {
						font-size: 44upx;
					}

					.count-content {
						border-width: 2upx 0;
						text-align: center;
					}
				}
			}
		}

		.confirm-btn {
			@extend .flex-center-center;
			height: 80upx;
			border-radius: 80upx;
			color: white;
			font-size: 32upx;
			margin-top: 10upx;
		}
	}

	[class*=disabled] {
		color: $font-color-light;
		opacity: .7;
	}
</style>
